<template>
  <a-card :title="$t('Survey Analysis')">
    <a-table bordered :dataSource="dataSource" :columns="columns">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-button type="link" @click="checkSurvey(record)">Detail</a-button>
        </template>
      </template>
    </a-table>
  </a-card>
   <a-modal v-model:open="open" :title="currentSurvey?.title" width="50vw">
    <a-row>
      <a-col :span="8">Points: </a-col><a-col :span="4">{{currentSurvey.points}}</a-col>
    </a-row>
    <a-row>
      <a-col :span="8">Pending Settlement Points: </a-col><a-col :span="4">{{currentSurvey.unpaidPoints}}</a-col>
    </a-row>
    <a-row>
      <a-col :span="8">Total participate count: </a-col><a-col :span="4">{{currentSurvey.totalParticipateCount}}</a-col>
    </a-row>
    <a-row>
      <a-col :span="8">Processing count: </a-col><a-col :span="4">{{currentSurvey.processingCount}}</a-col>
    </a-row>
     <a-row>
      <a-col :span="8">Finish count: </a-col><a-col :span="4">{{currentSurvey.finishCount}}</a-col>
    </a-row>
    <a-row>
      <a-col :span="8">Waiting audit count: </a-col><a-col :span="4">{{currentSurvey.waitingAuditCount}}</a-col>
    </a-row>
     <a-row>
      <a-col :span="8">Audit passed count: </a-col><a-col :span="4">{{currentSurvey.auditPassCount}}</a-col>
    </a-row>
     <a-row>
      <a-col :span="8">Audit refused count: </a-col><a-col :span="4">{{currentSurvey.auditRefuseCount}}</a-col>
    </a-row>
    <a-row>
      <a-col :span="12"></a-col>
    </a-row>
      <a-form layout="vertical" :disabled="true">
      <a-form-item v-for="(item, index) in currentSurvey.finishQuestionStatics" :key="item.questionId" :label="`${index + 1}.${item.question}`">
        <a-row>
          <a-col :span="18">Answer</a-col>
          <a-col :span="6">Count</a-col>
        </a-row>
        <a-row v-for="(option,ke) in item.userOptionCounts" :key="option">
          <a-col :span="18">{{ke}}</a-col>
          <a-col :span="6">{{option}}</a-col>
        </a-row>
        <br v-if="item.questionType === 2 || item.questionType === '2'" />
      </a-form-item>

    </a-form>
    <template #footer>
      <a-space>
        <a-button @click="open = false">{{$t('Close')}}</a-button>
        <a-button type="primary" v-if="handleType === 'audit'" @click="submitSurvey">{{$t('Submit')}}</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { useI18n } from "vue-i18n";
import { surveyStatics } from "../../api/survey"

const { t } = useI18n();
const dataSource = ref([])
const columns = ref([
  { title: t("Survey Title"), dataIndex: "title", key: "title", ellipsis: true},
  { title: t("Survey Points"), dataIndex: "points", key: "points",align: "center"},
  { title: t("Pending Settlement Points"), dataIndex: "unpaidPoints",  key: "unpaidPoints",align: "center"},
  { title: "Participant", dataIndex: "totalParticipateCount", key: "totalParticipateCount",align: "center"},
  { title: "Completed", dataIndex: "finishCount", key: "finishCount",align: "center"},
  { title: "Action", dataIndex: "action", key: "action"},
]);
const open = ref<boolean>(false);
const currentSurvey = ref()
const checkSurvey = (item) => {
  open.value = true;
  currentSurvey.value = item;
}

const getStatisticsList = () => {
  surveyStatics({}).then(res => {
    if (res.status == 200) {
      dataSource.value = res.data.data
    }
  })
}

getStatisticsList()

</script>